<template>
    <div class="w-full h-full">
        <div class="w-1/2 m-auto">
            <el-form :model="state" label-width="80px">
                <el-form-item label="身高">
                    <el-input v-model="state.height"></el-input>
                </el-form-item>
                <el-form-item label="体重">
                    <el-input v-model="state.weight"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-select v-model="state.gender" placeholder="选择性别">
                    <el-option label="男
                    " value="男"></el-option>
                    <el-option label="女" value="女"></el-option>

                  </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="state.age"></el-input>
                </el-form-item>
                <el-form-item label="BMI">
                    <el-input disabled v-model="state.BMI"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload v-model:file-list=state.file class="avatar-uploader" action="http://127.0.0.1:8000/other/upload"
                        :show-file-list="true" :on-success="(response, uploadFile, uploadFiles)=>{handleSuccess(response)}">
                        <img  v-if="state.pics" :src="state.pics" class="!h-40 !w-40 !rounded-2xl">
                        <el-button type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
              <el-form-item label="其他说明">
                <el-input type="textarea" v-model="state.ext">
                </el-input>
              </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="send">提交</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>
 
<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
let state = reactive({
    height: '',
    weight: '',
    gender: '',
    BMI: '',
    age: '',
    pics: '',
    file:[],
    ext:''
})

const getUser = (id)=>{
  axios.post('http://localhost:8000/user/get_one', {"id":id}).then(res => {
    let data = res.data
    if(data.code===200){
      state.height = data.data[0].height
      state.weight = data.data[0].weight
      state.gender = data.data[0].gender
      state.age = data.data[0].age
      state.BMI = data.data[0].bmi
      state.pics = data.data[0].pics
      state.ext = data.data[0].ext

}
  })
}
onMounted(()=>{
  getUser(localStorage.getItem('user_id'))
})

watch(() => state.height, (newVal, oldVal) => {
    state.BMI = (state.weight / (state.height / 100) ** 2).toFixed(2)
})
watch(() => state.weight, (newVal, oldVal) => {
    state.BMI = (state.weight / (state.height / 100) ** 2).toFixed(2)
})
const handleSuccess = ( response) => {
  state.pics = response.data
    ElMessage.success('上传成功')
}
const send = ()=>{
    let payload = {
        height: state.height,
        weight: state.weight,
        gender: state.gender,
        bmi: state.BMI,
        age: state.age,
        pics: state.pics,
        ext:state.ext
    }
    axios.post('http://localhost:8000/user/update_one', {"cond":{"id":localStorage.getItem('user_id')},"item":payload}).then(res => {
        const {data} = res
        if(data.code===200){
            ElMessage.success('修改成功')
        }else{
            ElMessage.error('修改失败')
        }
    })
}

</script> 
 
<style scoped></style>